<include file="Public/common1" />
<block name="css">
    <link rel="stylesheet" type="text/css" href="__CSS__/order_center/order.css">
    <link href="__CSS__/calendar/calendar.css" rel="stylesheet" type="text/css"/>
</block>
<block name="content">
    <input type="hidden" id="lineId" value="{$line['line_id']}"/>
    <ul class="navs clearfix">
          <li class="active" style="border-left: 1px solid #ddd;"><span class="icon">&#10004;</span><a>第一步<br/>选择线路</a></li>
          <li class="active"><span class="icon">2</span><a >第二步<br/>行程预览</a></li>
          <li><span class="icon">3</span><a >第三步<br/>游客信息录入</a></li>
          <li><span class="icon">4</span><a >订单详情预览</a></li>
    </ul>
    <div class="warp clearfix">
        <h2>{$line.line_name}</h2>
<!--         <section class="block clearfix">
            <div class="col-xs-3">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4155809725,2453290283&fm=27&gp=0.jpg"/>
            </div>
            <p class="col-xs-9">
                线路特色：※ 广州往返，罗马进，巴黎出，不走回头路，法国、瑞士、意大利、奥地利经典联游；
                <br/>
                ※ 探索世界四大博物馆之法国【卢浮宫】，专业讲解镇馆三宝；
                <br/>
                ※ 畅游法兰西王国首都凡尔赛小镇，体验法式皇室风情；
                <br/>
                ※ 游览瑞士蜜月小镇，体验欧式湖光山色；
                <br/>
                ※ 拜访奥地利水晶城市因斯布鲁克，感受小镇入画的美妙；
                <br/>
                ※ 徜徉水上之城“威尼斯”，《花儿与少年》拍摄地圣吉米尼亚诺与最小国度“梵地冈”。
            </p>
        </section> -->

        <section class="block clearfix">
            <div class="col-xs-6" style="border-right: 1px solid #ddd;">
                <div id="myrl" >
                <form name=CLD>
                <table class="biao table table-bordered table-condensed" style="table-layout:fixed" >
                    <thead>
                        <tr>
                            <td><a  title="上一年" id="nianjian" class="btn btn-default">&#171;</a>
                                <a  title="上一月" id="yuejian" class="btn btn-default">&#139;</a></td>
                            <td class="calTit" colSpan=5 >
                                <div >
                                    <span id="dateSelectionRili" class="dateSelectionRili"  >
                                    <span id="nian" class="topDateFont"></span><span class="topDateFont">年</span><span id="yue" class="topDateFont"></span><span class="topDateFont">月</span>
                                    <!-- <span class="dateSelectionBtn cal_next" onclick="dateSelection.show()">▼</span> --></span> &nbsp;&nbsp;<font id=GZ class="topDateFont"></font>
                                </div>

                                <!--新加导航功能-->
                                <div style="left: 250px; display: none;" id="dateSelectionDiv">
                                    <div id="dateSelectionHeader"></div>
                                    <div id="dateSelectionBody">
                                        <div id="yearList">
                                            <div id="yearListPrev" onclick="dateSelection.prevYearPage()">&lt;</div>
                                            <div id="yearListContent"></div>
                                            <div id="yearListNext" onclick="dateSelection.nextYearPage()">&gt;</div>
                                        </div>
                                        <div id="dateSeparator"></div>
                                        <div id="monthList">
                                            <div id="monthListContent"><span id="SM0" class="month"onclick="dateSelection.setMonth(0)">1
                                            </span><span
                                                    id="SM1" class="month" onclick="dateSelection.setMonth(1)">2</span><span
                                                    id="SM2" class="month" onclick="dateSelection.setMonth(2)">3</span><span
                                                    id="SM3" class="month" onclick="dateSelection.setMonth(3)">4</span><span
                                                    id="SM4" class="month" onclick="dateSelection.setMonth(4)">5</span><span
                                                    id="SM5" class="month" onclick="dateSelection.setMonth(5)">6</span><span
                                                    id="SM6" class="month" onclick="dateSelection.setMonth(6)">7</span><span
                                                    id="SM7" class="month" onclick="dateSelection.setMonth(7)">8</span><span
                                                    id="SM8" class="month" onclick="dateSelection.setMonth(8)">9</span><span
                                                    id="SM9" class="month" onclick="dateSelection.setMonth(9)">10</span><span
                                                    id="SM10" class="month" onclick="dateSelection.setMonth(10)">11</span><span
                                                    id="SM11" class="month curr" onclick="dateSelection.setMonth(11)">12</span>
                                            </div>
                                            <div style="clear: both;"></div>
                                        </div>
                                        <div id="dateSelectionBtn">
                                            <div id="dateSelectionTodayBtn" onclick="dateSelection.goToday()">今天</div>
                                            <div id="dateSelectionOkBtn" onclick="dateSelection.go()">确定</div>
                                            <div id="dateSelectionCancelBtn" onclick="dateSelection.hide()">取消</div>
                                        </div>
                                    </div>
                                    <div id="dateSelectionFooter"></div>
                                </div>

                                <!--    <a id="jintian"  title="今天" class="btn" style="float:right; margin-top:-2px; font-size:12px; text-align:center;">今天</a>-->
                            </td>
                            <td><a  id="nianjia" title="下一年" class="btn btn-default" style="float:right;">&#187;</a>
                                <a  id="yuejia" title="下一月" class="btn btn-default" style="float:right;">&#155;</a></td>
                        </tr>
                        <tr  class="calWeekTit" style="font-size:12px; height:20px;text-align:center;">
                            <td width="100" class="red">星期日</td>
                            <td width="100">星期一</td>
                            <td width="100">星期二</td>
                            <td width="100">星期三</td>
                            <td width="100">星期四</td>
                            <td width="100">星期五</td>
                            <td width="100" class="red">星期六</td>
                        </tr>
                    </thead>
                    <tbody id="calendar">

                    </tbody>

                </table></form>
                <div class="seat text-danger">该日期剩余座位 <span id="seat">0</span> </div>
            </div></div>
            <div class="col-xs-6">
                <h4>行程</h4>
                <p class="trip_detail">
                    <foreach name="trip" key="k" item="v">
                        {$word.$k}<br/>
                        {$v}<br/>
                        <br/>
                    </foreach>
                </p>
                <div class="col-xs-12 mt-15 text-right">
                    <botton type="button" onclick="openDetail({$line.line_id})" class="btn btn-primary">行程详情</botton>
                </div>
                <h4>线路费用</h4>
                <p class="line_price">
                    线路费用：&#165;<span id="fee">0</span>/人
                </p>
            </div>

        </section>
        <form id="form" method="post" action="/Operator/OrderCenter/writeInfo" onsubmit="return checkForm()">
            <input type="hidden" name="line_id" value="{$line.line_id}" />
            <!-- 附加产品 -->
            <section id="product" class="block clearfix">
                <!-- <h4 class="title">附加产品</h4> -->
                <div class="col-xs-6" >
                    <div class="col-xs-12">
                        交通方式：{$traffic['go']}(去)->{$traffic['back']}(回)
                    </div>
                    <div class="col-xs-12">
                        <if condition="$line['visa_price']">
                            签证：<div class="tran"><input type="checkbox" data-price="{$line.visa_price}" name="visa_price" value="{$line.visa_price}" id="visa"/> 签证</div><br/>
                        </if>
                        保险：<foreach name="insure" item="v">
                                <div class="tran"><input type="checkbox" data-price="{$v.now_adult_price}" value="{$v.up_insure_id}" name="up_insure_id" class="insure" /> {$v.insure_name}</div>
                              </foreach><br/>
                        附加产品：<foreach name="add_product" item="v">
                                    <div class="tran"><input type="checkbox" data-price="{$v.product_price}" name="product_id[]" class="add_product" value="{$v.product_id}"/> {$v.product_name}</div>
                                  </foreach>
                        <!-- <div class="tran"><input type="checkbox" id="ck3"/> 补房差</div> -->

                    </div>
                    <h4 class="col-xs-12">线路总费用</h4>
                    <p class="line_price" style="padding-left: 2rem;">
                        线路费用：&#165;<span id="totalFee">0</span>/人
                    </p>
                </div>

                <div class="col-xs-6" >
                    <h4 class="col-xs-12">可选酒店：</h4>
                    <div class="col-xs-12" id="hotel">
                        <foreach name="hotel" item="v">
                        第{$v.current_day}天：<br/>
                        {$v.hotel}<br/><br/>

                        </foreach>
                    </div>
                </div>
            </section>

            <div class="clearfix"></div>
            <div class="col-xs-12 text-center mt-15"><button type="submit" id="submit" class="btn btn-primary btn-lg">下一步</button></div>
        </form>
    </div>
</block>
<block name="js">
<script src="__JS__/order_center/order.js"></script>
<script type="text/javascript">
//出团日期
var date = "{$time ? $time : ''}",
//特殊日期
specialDate = {$special ? $special : ""},
//一般日期的价格
normal = {$price ? $price : ''},
$seat = $('#seat'),
$hotel = $('#hotel');

/**
 * 查询所选日期的余位
 */
$('#calendar').on('click', '.normal-date', function(){
    // console.log($(this).data());
    var $that = $(this)
    $('#calendar .date-checked').removeClass('date-checked');
    $that.addClass('date-checked');

    $.getJSON('{:U('getSeat')}',
    { line_id: {$line.line_id| default=0}, day: $that.data('day') },
    function(data){
        $seat.html(data);
        $totalFee.html();
        $fee.html($that.data('adult_price'));
        currentDay = $that.data('day') ;
        totalFeeChange();
    })
})


</script>
<script type="text/javascript" src="__JS__/order_center_calendar.js"></script>
</block>
